/*
 * @Description:
 * @Author: owen
 * @Date: 2021-06-08 15:01:18
 * @LastEditTime: 2021-06-09 15:36:23
 */
/*
 * @Description: 导入
 */
import { defineComponent, PropType, ref, watch } from 'vue'
import { notification } from 'ant-design-vue'
import { isTrue } from '@/utils/tools'
const props = {
    visible: {
        type: Boolean as PropType<boolean>,
        required: true
    },
    close: {
        type: Function as PropType<(a?: string) => void>,
        required: true
    },
    func: {
        type: Function as PropType<(...data: any) => any>,
        required: true
    },
    title: {
        type: String as PropType<string>,
        required: true
    },
    templateUrl: {
        type: String as PropType<string>,
    },
    accept: {
        type: String as PropType<string>,
        default: '.zip,.rar,.7z,.tar,.gz,.bz2,.xz',
    },
} as const
export default defineComponent({
    props,
    setup(props) {
        const fileName = ref('导入' + props.title)
        const inputRef = ref<HTMLInputElement>()
        const loading = ref(false)
        function download() {
            window.open(props.templateUrl)
        }
        async function hdFileChange(event: Event) {
            if (event.target) {
                const data = event.target as any
                const file: File = data.files[0]
                if (inputRef.value) {
                    inputRef.value.value = ''
                }
                fileName.value = file.name
                const formData = new FormData()
                formData.append('pack', file)
                loading.value = true
                const { success, message } = await props.func(formData as any)
                loading.value = false
                if (success) {
                    notification.success({
                        message: '提示',
                        description: '导入成功'
                    })
                    props.close('ok')
                } else {
                    notification.warning({
                        message: '提示',
                        description: `${message}`
                    })
                }
            }
        }
        watch(
            () => props.visible,
            (val) => {
                if (!val) {
                    fileName.value = '导入' + props.title
                }
            }
        )
        //取消
        return () => (
            <a-modal visible={props.visible} title={'导入' + props.title} onCancel={props.close} foot={null} centered confirmLoading={loading.value}>
                <div style={{ textAlign: 'center' }}>
                    {isTrue(props.templateUrl) && (
                        <div>
                            <a-button type="primary" onClick={download}>
                                下载{props.title}模板
                            </a-button>
                        </div>
                    )}
                    <a-button class="ant-btn ant-btn-primary" style={{ marginTop: '20px' }} loading={loading.value}>
                        {fileName.value}
                        <input
                            type="file"
                            ref={inputRef}
                            class="F-file"
                            accept={props.accept}
                            onChange={hdFileChange}
                        />
                    </a-button>
                </div>
            </a-modal>
        )
    }
})
